<template>
  <div class="container">
    <el-form :model="form" label-width="100px" :rules="rules" ref="ruleForm">
      <el-form-item label="所属学科" prop="subjectID">
        <el-select v-model="form.subjectID" placeholder="请选择">
          <el-option
            :label="obj.label"
            :value="obj.value"
            v-for="obj in simpleList"
            :key="obj.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="活动名称" prop="tagName">
        <el-input
          v-model="form.tagName"
          placeholder="请输入目录名称"
        ></el-input>
      </el-form-item>

      <!-- 按钮区域 -->
      <el-form-item>
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="confirmFn">确 定</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { add, update, detailAPI } from '@/api/hmmm/tags.js'
import { simple } from '@/api/hmmm/subjects.js'
export default {
  data () {
    return {
      form: {
        subjectID: null, // 下拉框
        tagName: null // 输入框
      },
      simpleList: [], // 简单数据列表
      // 校验规则
      rules: {
        subjectID: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请填写活动形式', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      required: true
    },
    articleId: {
      required: true
    }
  },
  async created () {
    await this.getSimple()

    if (this.isEdit) {
      this.getTag()
    }
  },
  methods: {
    // 取消按钮
    cancelFn () {
      this.$emit('close')
    },

    // 确定按钮
    async confirmFn () {
      // await add(this.form)
      this.$refs.ruleForm.validate(async (valid) => {
        if (!valid) return
        if (this.isEdit) {
          await update(this.form)
          this.$message.success('添加成功')
          this.$emit('close')
        } else {
          const res = await add(this.form)
          console.log(res)
          this.$message.success('添加成功')
          this.$emit('close')
        }
      })
    },

    // 获取简单列表 数据
    async getSimple () {
      const res = await simple()
      // console.log(res)
      this.simpleList = res.data
    },

    // 获取 标签 详情
    async getTag () {
      const res = await detailAPI(this.articleId)
      // console.log(res)
      this.form = res.data
    }
  }
}
</script>

<style scoped >
::v-deep .el-input {
  width: 250px;
}
</style>
